<template>
  <div class="GreetingCardTabBar">
    <div class="partA" :style="tabBarShow ? 'bottom: -200px;' : ''">
      <template v-for="(item, index) in list">
        <div class="partA1" :key="index" @click="tabBtn(index)" v-if="!item.hide">
          <u-icon :name="item.icon" :color="tabIndex === index ? 'var(--main-color)' : '#898b8d'" size="44"></u-icon>
          <p class="partA2" :style="tabIndex === index ? 'color: var(--main-color);' : ''">{{ item.text }}</p>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabBarShow: 0,
      tabIndex: 0,
      list: [
        {
          text: '首页',
          icon: 'home-fill',
        },
        {
          text: '客服',
          icon: 'server-fill',
          hide: true,
        },
        {
          text: '我的',
          icon: 'coupon-fill',
        },
      ],
    }
  },
  mounted() {
    if (sessionStorage.tabIndex) {
      this.tabBtn(parseInt(sessionStorage.tabIndex))
    }
    this.$bus.$on('tabBarShow', (i) => {
      this.tabBarShow = i
    })
  },
  computed: {
    userinfo() {
      return this.$store.state.app.userinfo
    },
  },
  watch: {
    userinfo() {
      if (this.userinfo.send) {
        this.list[1].hide = false
      } else {
        this.list[1].hide = true
      }
    },
  },
  methods: {
    tabBtn(i) {
      if (i === 1) {
        if (this.userinfo.send) {
          window.location.href = 'tel:' + this.userinfo.send
        }
      } else {
        this.tabIndex = i
        sessionStorage.tabIndex = i
        this.$parent.pageSwich(i)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.GreetingCardTabBar {
  .partA {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 118rpx;
    background: rgba(255, 255, 255, 0.95);
    z-index: 300;
    width: 100%;
    display: flex;
    justify-content: space-around;
    text-align: center;
    transition: all 0.3s;
    .partA1 {
      width: 30%;
      padding-top: 11rpx;
    }
    .partA2 {
      padding-top: 8rpx;
      font-size: 22rpx;
      line-height: 22rpx;
      color: #898b8d;
    }
  }
}
</style>
